import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '@/store'
// 导入路由相关的组件
// import Login from '@/views/Login/Login.vue'
const Login = () => import('@/views/Login/Login.vue')
// import Reg from '@/views/Reg/Reg.vue'
const Reg = () => import('@/views/Reg/Reg.vue')
// import Main from '@/views/Main/Main.vue'
const Main = () => import('@/views/Main/Main.vue')
// import Home from '@/views/Home/Home.vue'
const Home = () => import('@/views/Home/Home.vue')
// import UserAvatar from '@/views/Menus/User/UserAvatar.vue'
const UserAvatar = () => import('@/views/Menus/User/UserAvatar.vue')
// import Userinfo from '@/views/Menus/User/Userinfo.vue'
const Userinfo = () => import('@/views/Menus/User/Userinfo.vue')
// import UserPwd from '@/views/Menus/User/UserPwd.vue'
const UserPwd = () => import('@/views/Menus/User/UserPwd.vue')
// import ArtCate from '@/views/Menus/Art/ArtCate.vue'
const ArtCate = () => import('@/views/Menus/Art/ArtCate.vue')
// import ArtList from '@/views/Menus/Art/ArtList.vue'
const ArtList = () => import('@/views/Menus/Art/ArtList.vue')
Vue.use(VueRouter)
// 注意:如果创建的组件，需要通过路由进行展示，则要放到view目录下，否则要放到components目录下
// 路由规则的数组
const routes = [
  // 登录组件的路由规则,定义路由地址的时候推荐使用小写
  // 带有name名称的路由规则叫做“命名路由”
  // 不带name名称的路由规则叫做“匿名路由”
  { path: '/login', component: Login, name: 'login' },
  { path: '/reg', component: Reg, name: 'reg' },
  {
    path: '/',
    component: Main,
    redirect: '/home',
    name: 'main',
    children: [
      // 嵌套的子路由规则
      // 子路由的path有两种写法
      // 完整写法 -> 父 + 子
      // 简化写法->子(父路由的path必须要被省略，而且子路由的path不要以"/"开头)
      { path: '/home', component: Home },
      { path: '/user-avatar', component: UserAvatar },
      { path: '/user-info', component: Userinfo },
      { path: 'user-pwd', component: UserPwd },
      { path: 'art-cate', component: ArtCate },
      { path: 'art-list', component: ArtList }
    ]
  }
  // 注册组件的路由规则

]
// 创建路由的实例对象
const router = new VueRouter({
  routes
})
// 声明全局前置守卫
// 在每次发生路由导航跳转的时候，都会触发fn回调
// to：表示要跳到路由
// from:表示将要离开的登录信息
router.beforeEach((to, from, next) => {
  // 1.判断用户将要访问的路由地址，是否为有权限的地址
  // 1.1如果不是，则直接放行（登录、注册页面）
  // 1.2如果访问的页面地址，是有权限的地址（非登录、非注册）则需要进行权限校验
  // .2.1只需要看用户手里是否有token即可
  // 2.2如果没有token,强制用户跳转到登录页面
  if (to.path === '/reg' || to.path === '/login') {
    // 不需要权限，直接放行
    next()
  } else {
    // 需要判断是否有token，再决定是否放行
    // 1.先获取token
    // store.state.模块的注册名称，模块下的数据
    const token = store.state.user.token
    // 2.再判断
    if (token) {
      // 证明用户有token,而且要访问有权限的页面，放行
      next()
    } else {
      // 证明用户没有token,还想访问有权限的页面，强制用户跳转到登录页面
      next('/login')
    }
  }
})
export default router
